<style lang="less" scoped>
.search {
  width:400px;
}
</style>

<template lang="pug">
#admin-article.admin
  br
  vsearch(class="search",model='Article', searchKey='charName', :start='start')
  //- router-link(to='/admin/addArticle')
  //-     el-button.add-btn(type="text" @click="") 创建
  template
    el-table(:data='items', border='', style='width: 100%')
      el-table-column(type="index", label='索引',align="center", width="100")
      el-table-column(prop='charName',align="center",width="150", label='文字名称')
      el-table-column(prop='phoneticize',align="center",width="150", label='拼音')
      el-table-column(align="center",width="200", label='文字版本&年级')
        template(scope="scope")
          p(v-for="item in scope.row.belongVersionList")
            span(v-if="item.versionName") {{item.versionName+"-"+item.gradeName+"-"+item.class+"课程"}}
      //- el-table-column(prop='tag',align="center",width="150", label='标签')
      //-   template(scope="scope")
      //-     el-tag(type="primary" style="margin:0 10px;", v-for="item in scope.row.tagNames") {{item}}
      el-table-column(prop='collectCount',align="center",width="150", label='收藏数')
      el-table-column(prop='viewCount', label=' 观看次数',align="center",width="150")
      //- el-table-column(prop='likeNum', label='点赞数',align="center",width="150")
      //- el-table-column(prop='sickNum', label='点踩数',align="center",width="150")
      el-table-column(prop='commentNum', label='评论数',align="center",width="150")
      el-table-column(label='操作',align="center",width="150")
        template(scope='scope')
          el-button(size='small',
                    @click='handleEdit(scope.$index, scope.row)') 编辑
          el-button(size='small',
                    type='danger',
                    @click='handleDelete(scope.$index, scope.row)') 删除
  el-pagination(@size-change='handleSizeChange',
                @current-change='handleCurrentChange',
                :current-page="1",
                :page-size='20',
                layout='total, prev, pager, next',
                :total='total')
</template>

<script>
import hljs from "highlight.js";
import _ from 'lodash';

export default {
  name: "admin-article",
  computed: {
    items() {
      const articles = this.$store.state.adminItems;
      if(typeof(articles) !== 'array' )
      articles.forEach(el => {
        if (el.status === "send") {
          el.status = "已发布";
        }
      });
      return articles;
    },
    total() {
      return this.$store.state.count; // 列表总数
    }
  },
  data() {
    return {
      start: 0
    };
  },
  methods: {
    fetch(start = 0) {
      const _this = this;
      let hasfetch = false;
      const cb = function(result) {
        _this.$set(_this, "start", start);
        hljs.initHighlightingOnLoad();
        result.list.forEach(function(i){
          i.tagNames = [];
          for (const it of i.tag) {
            let index = _.map(_this.$store.state.tags,'_id').indexOf(it);
            if(index>=0) {
                let name = _this.$store.state.tags[index].name;
                if(name) i.tagNames.push(name);
            }

          }
          i.belongVersionList.forEach((j)=>{
            let versionIndex = _.map(_this.$store.state.versions,'_id').indexOf(j.version);
            let gradeIndex = _.map(_this.$store.state.grades,'_id').indexOf(j.grade);
            if(versionIndex>=0 && gradeIndex>=0) {
              j.versionName = _this.$store.state.versions[versionIndex].name;
              j.gradeName = _this.$store.state.grades[gradeIndex].name;
            }
          })
        })
      };
        const list = ['version','grade','tag'];
              list.forEach(item => {
                _this.$store.dispatch("FETCH_ADMIN_VERSION", {
                  url: "query/"+item,
                  key:item+'s',
                  data: {
                    start: 0
                  },
                  cb:()=>{
                    if(hasfetch) return;
                      hasfetch = true;
                      this.$store.dispatch("FETCH_ADMIN_ITEMS", {
                      cb: cb,
                      url: "articles",
                      data: {
                        start: start
                      }
                    });
                  }
                });
              });

    },
    handleEdit(index, row) {
      this.$router.push(`/admin/addArticle?id=${row._id}`);
    },
    handlePublish(index, row) {
      const _this = this;
      this.$store.dispatch("PUBLISH_ADMIN_ITEM", {
        url: `article/${row._id}`,
        msg: _this.$message,
        cb: _this.fetch,
        data: {
          published: !row.published
        }
      });
    },
    handleDelete(index, row) {
      const _this = this;
      this.$store.dispatch("DELETE_ADMIN_ITEM", {
        url: `article/${row._id}`,
        msg: _this.$message,
        cb: _this.fetch
      });
    },
    handlePreview(index, row) {
      this.$router.push(`/article?id=${row._id}`);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.fetch(val - 1);
      console.log(`当前页: ${val}`);
    }
  },
  beforeMount() {
    this.fetch();
  }
};
</script>

<style lang="stylus" scoped>
.el-table, .el-pagination {
  margin-top: 20px;
}

.el-input {
  width: 40%;
}

.add-btn {
  margin-left: 30px;
}

.el-table {
  margin-top: 30px;
}
</style>
